<template>
  <div class="classification">
    <div class="header">
      <el-button icon="el-icon-plus" type="primary" class="menu"
        >新增菜品分类</el-button
      >
      <el-button icon="el-icon-plus" type="primary" class="thali"
        >新增套餐分类</el-button
      >
    </div>

    <div class="middle">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="分类名称"></el-table-column>
        <el-table-column prop="type" label="分类类型">
          <template v-slot="{ row }">
            {{ row.type === 1 ? "菜品分类" : "套餐分类" }}</template
          >
        </el-table-column>
        <el-table-column prop="createTime" label="操作时间"></el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="address"
          label="操作"
        >
          <el-link type="primary">修改</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link type="danger">删除</el-link>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getClassifications } from "@/api/classification";
export default {
  created() {
    this.init();
  },
  data() {
    return {
      tableData: [],
      currentPage4: 4,
    };
  },
  methods: {
    init() {
      const params = { page: 1, pageSize: 10 };
      getClassifications(params).then((res) => {
        // console.log(res);
        this.tableData = res.data.records;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.classification {
  padding-left: 40px;

  .header {
    padding-top: 40px;
    padding-bottom: 20px;
  }

  .menu {
    background-color: #333333;
  }

  .thali {
    background-color: #ffc200;
    color: black;
  }
}
</style>
